<template>
    <div class="login">
      <el-form ref="ruleFormRef"
       :model="ruleForm"
        :rules="rules" 
     
        :size="formSize" status-icon>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="ruleForm.pwd" type="password" />
        </el-form-item>
  
        <el-form-item>
  
          <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>    
  
        </el-form-item>
  
      </el-form>
    </div>
  </template>
  <script lang="ts" setup>
  import { reactive, ref } from "vue";
  import type { FormInstance, FormRules } from "element-plus";
  import { useRouter } from "vue-router";
  
  const formSize = ref("default");
  const ruleFormRef = ref<FormInstance>();
  const ruleForm = reactive({
    name: "111",
    pwd: "111",
  });
  
  const rules = reactive<FormRules>({
    name: [
      { required: true, message: "请输入用户名", trigger: "blur" },
      { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
    ],
    pwd: [
      { required: true, message: "请输入密码", trigger: "blur" },
      { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
    ],
  });
  const router = useRouter();
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log(ruleForm);
        router.push({
          name: "home",
          params: { id: 1 },
        });
        console.log("submit!");
      } else {
        console.log("error submit!", fields);
      }
    });
  };
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
  };
  </script>
  <style scoped>
  .login {
    width: 30%;
    border: solid;
    margin: auto;
  }
  </style>